<template>
  <basic-container>
    <el-form v-if="isLoad">
      <el-row>
        <h3 style="text-align: center; font-size: 25px">{{ schoolName }}</h3>
      </el-row>
      <el-row v-for="(item, index) in dataList" :key="index">
        <el-row style="border: 5px solid #d5d6d9; margin-bottom: 24px">
          <h3 class="h3Css">{{ item.typeName }}</h3>
          <span class="titleCss">数据总览</span>
          <el-row style="padding: 10px">
            <el-col style="display: flex">
              <table border="0" class="table_style" style="width: 800px">
                <tbody>
                  <tr class="headerCss">
                    <td class="tableTdCss"></td>
                    <td class="tableTdCss">在校学生人数</td>
                    <td class="tableTdCss">完成测评</td>
                    <td class="tableTdCss">未完成测评</td>
                    <td class="tableTdCss">预警人数</td>
                  </tr>
                  <tr
                    v-for="(info, i) in dataList[index].findAllNum"
                    :key="i + 'a'"
                  >
                    <td class="tableTdCss">
                      {{
                        item.findAllNum[i].code == 1
                          ? "男"
                          : item.findAllNum[i].code == 2
                          ? "女"
                          : item.findAllNum[i].code
                      }}
                    </td>
                    <td class="tableTdCss">{{ item.findAllNum[i].allNum }}</td>
                    <td class="tableTdCss">{{ item.findAllNum[i].num }}</td>
                    <td class="tableTdCss">{{ item.findAllNum[i].noNum }}</td>
                    <td class="tableTdCss">
                      {{ item.findAllNum[i].levelNum }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </el-col>
          </el-row>
          <el-row style="padding: 10px" class="m-top20">
            <el-col :span="7">
              <div :id="'total' + index" style="height: 250px"></div>
            </el-col>
            <el-col :span="1"> </el-col>
            <el-col :span="7">
              <div :id="'distribution' + index" style="height: 250px"></div>
            </el-col>
            <el-col :span="1"> </el-col>
            <el-col :span="7">
              <div :id="'sex' + index" style="height: 250px"></div>
            </el-col>
            <el-col :span="1"> </el-col>
          </el-row>
          <span class="titleCss">年级分布</span>
          <el-row style="padding: 10px">
            <el-col style="display: flex">
              <table border="0" class="table_style" style="width: 600px">
                <tbody>
                  <tr class="headerCss">
                    <td class="tableTdCss">年级</td>
                    <td class="tableTdCss">已测人数</td>
                    <td class="tableTdCss">未测人数</td>
                    <td class="tableTdCss">预警人数</td>
                  </tr>
                  <tr
                    v-for="(
                      findAllGradeNumItem, findAllGradeNumIndex
                    ) in item.findAllGradeNum"
                    :key="findAllGradeNumIndex + 'findAllGradeNum'"
                  >
                    <td class="tableTdCss">
                      {{ findAllGradeNumItem.code }}
                    </td>
                    <td class="tableTdCss">
                      {{ findAllGradeNumItem.num }}
                    </td>
                    <td class="tableTdCss">
                      {{ findAllGradeNumItem.noNum }}
                    </td>
                    <td class="tableTdCss">
                      {{ findAllGradeNumItem.levelNum }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </el-col>
          </el-row>
          <el-row style="padding: 10px" class="m-top20">
            <el-col :span="12">
              <div
                :id="'gradeDistribution' + index"
                style="height: 250px"
              ></div>
            </el-col>
            <el-col :span="2"> </el-col>
            <el-col :span="8">
              <div :id="'gradeRate' + index" style="height: 250px"></div>
            </el-col>
          </el-row>
        </el-row>
      </el-row>
    </el-form>
  </basic-container>
</template>

<script>
import {
  findAllNum,
  findAllGradeNum,
  findAllAbnormalSexNum,
  findAllAbnormalNum,
  findAllAbnormalGradeNum,
  findAllNumTo,
  findAllGradeNumTo,
  getTenant,
} from "@/api/report/report";
import { geGaugetype } from "@/api/test";
import { mapGetters } from "vuex";
import * as echarts from "echarts";
export default {
  name: "thirdRegister",
  components: {},
  data() {
    return {
      dataList: [],
      isLoad: false,
      schoolName: "",
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  mounted() {
    this.geGaugetype();
    this.getuserInfo();
  },
  methods: {
    getuserInfo() {
      getTenant(this.$route.query.tenantId).then((res) => {
        this.schoolName = res.data.data.tenantName;
      });
    },
    geGaugetype() {
      let _this = this;
      let tenantId = this.$route.query.tenantId;
      geGaugetype({}).then((res) => {
        if (res.data.code == 200) {
          let resultData = res.data.data;
          const promiseList = [];
          let nameList = [];
          resultData.map((item) => {
            let gaugeTypeId = item.projectGaugeTypeId;
            nameList.push(item.typeName);
            let params = {};
            let params1 = { tenantId: tenantId };

            if (this.$route.query.projectId) {
              params.projectId = this.$route.query.projectId;
              params1.projectId = this.$route.query.projectId;
            }
            params.tenantId = tenantId;
            params.gaugeTypeId = gaugeTypeId;
            promiseList.push(
              ...[
                findAllNum(params),
                findAllGradeNum(params),
                findAllAbnormalSexNum(params),
                findAllAbnormalNum(params),
                findAllAbnormalNum(params1),
                findAllAbnormalGradeNum(params),
                findAllNumTo(params),
                findAllGradeNumTo(params),
              ]
            );
          });

          Promise.all(promiseList).then((data) => {
            let index = 0;
            for (let i = 0; i < data.length - 8; i = i + 8) {
              let schoolDataObj = {};
              schoolDataObj.findAllNum = data[i].data.data;
              let totalAllNum = 0;
              let totalAum = 0;
              let totalNoNum = 0;
              let totalLevelNum = 0;
              schoolDataObj.findAllNum.map((v) => {
                totalAllNum += v.allNum * 1;
                totalAum += v.num * 1;
                totalNoNum += v.noNum;
                totalLevelNum;
                for (let jj in data[i + 6].data.data) {
                  let rowData = data[i + 6].data.data[jj];
                  if (v.code == rowData.code) {
                    totalLevelNum += rowData.levelNum * 1;
                    v.levelNum = rowData.levelNum;
                    break;
                  }
                }
              });
              schoolDataObj.findAllNum.push({
                code: "合计",
                allNum: totalAllNum,
                num: totalAum,
                noNum: totalNoNum,
                levelNum: totalLevelNum,
              });

              ///////////////////////////////////////////////////////////////////////
              let findAllAbnormalSexNumList = [];
              data[i + 2].data.data.map((item) => {
                let name = item.code == 1 ? "男" : item.code == 2 ? "女" : "";
                findAllAbnormalSexNumList.push({
                  value: item.num,
                  name: name,
                });
              });

              schoolDataObj.findAllAbnormalSexNumList =
                findAllAbnormalSexNumList;
              ///////////////////////////////////////////////////////////////////////
              let distributionList = [];
              data[i + 3].data.data.map((item) => {
                distributionList.push({ value: item.num, name: item.name });
              });
              /////////////////////////////////////////////////////////////////////// 异常人数总览
              let levelNumList = [];
              data[i + 4].data.data.map((item) => {
                levelNumList.push({ value: item.num, name: item.name });
              });
              schoolDataObj.levelNumList = levelNumList;

              schoolDataObj.distributionList = distributionList;
              ///////////////////////////////////////////////////////////////////////年级分布
              let gradeList = {};
              data[i + 1].data.data.map((item) => {
                if (item.code.num == -1) {
                  item.code.num == 0;
                }
                if (item.code.noNum == -1) {
                  item.code.noNum == 0;
                }
                if (gradeList[item.code]) {
                  if (item.name == "已测") {
                    gradeList[item.code].num = item.num;
                  } else {
                    gradeList[item.code].noNum = item.num;
                  }
                } else {
                  if (item.name == "未测") {
                    item.noNum = item.num;
                    item.num = 0;
                  } else {
                    item.noNum = 0;
                    item.num = item.num;
                  }
                  gradeList[item.code] = item;
                }
              });
              schoolDataObj.typeName = nameList[index];
              for (let mm in gradeList) {
                gradeList[mm].levelNum = 0;
                for (let nn in data[i + 7].data.data) {
                  let row = data[i + 7].data.data[nn];
                  if (mm == row.code) {
                    gradeList[mm].levelNum = row.num;
                    break;
                  }
                }
              }
              schoolDataObj.findAllGradeNum = gradeList;

              ////////////////////////////////////////////////////////
              let findAllAbnormalGradeNum = [];
              data[i + 5].data.data.map((item) => {
                findAllAbnormalGradeNum.push({
                  code: item.code,
                  num: item.num,
                });
              });
              schoolDataObj.findAllAbnormalGradeNum = findAllAbnormalGradeNum;
              ////////////////////////////////////////////////////////////////////////

              //////////////////////////////////
              // schoolDataObj.findAllGradeNum = data[i + 7].data.data;
              this.dataList.push(schoolDataObj);
              index++;
            }
            this.isLoad = true;
            this.$nextTick(() => {
              let ii = 0;
              this.dataList.map((vv) => {
                _this.initPieChart(
                  "sex" + ii,
                  "异常性别分布",
                  vv.findAllAbnormalSexNumList,
                  ["49%", "50%"]
                );
                _this.initPieChart(
                  "total" + ii,
                  "异常人数总览",
                  vv.levelNumList,
                  ["49%", "50%"]
                );
                _this.initPieChart(
                  "distribution" + ii,
                  "已测异常分布",
                  vv.distributionList,
                  ["49%", "50%"]
                );

                let gradeRateData = [];
                let xAxisData = [];
                let valueList = [];
                vv.findAllAbnormalGradeNum.map((rateitem) => {
                  gradeRateData.push({
                    value: rateitem.num,
                    name: rateitem.code,
                  });
                  xAxisData.push(rateitem.code);
                  valueList.push(rateitem.num);
                });
                _this.initPieChart(
                  "gradeRate" + ii,
                  "异常年级占比",
                  gradeRateData,
                  ["40%", "50%"]
                );
                this.getGradeDistribution(
                  "gradeDistribution" + ii,
                  "异常年级分布",
                  xAxisData,
                  valueList
                );
                ii++;
              });
            });
          });
        }
      });
    },
    initPieChart(id, title, dataList, centerList) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legendHoverLink: false,
        title: {
          text: title,
        },
        grid: {
          height: 250,
        },
        tooltip: {
          trigger: "item",
          formatter: "{a}<br />{b}: {c}({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "right",
          right: 10,
        },
        series: [
          {
            name: title,
            type: "pie",
            radius: ["30%", "60%"],
            center: centerList,
            data: dataList,
            label: {
              // position: "inside",
              formatter: "{d}%",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    getGradeDistribution(id, title, xAxisData, valueList) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: "异常年级分布",
        },
        grid: {
          top: 50,
          bottom: "15%",
          height: 150,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            interval: 0,
            rotate: 40,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            barMaxWidth: 30,
            name: title,
            data: valueList,
            type: "bar",
            itemStyle: {
              normal: {
                color: "#409eff",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.m-top20 {
  margin-top: 20px;
}
.table_style td,
th {
  padding: 5px;
  font-size: 15px;
}
.table_style {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
.tableTdCss {
  border: 1px solid #d3d3d3;
  width: 150px;
}
.headerCss {
  background: #29d;
  color: white;
}
.tableRowSingle {
  background: #ebeef5;
}
.tableRowDouble {
  background: #ecf5ff;
}
.h3Css {
  text-align: center;
  color: white;
  background: dodgerblue;
  padding: 5px;
}
.titleCss {
  padding: 10px;
  font-weight: 600;
  font-size: 16px;
  font-family: auto;
}
</style>